<template>
	<view class="container">
		<Header :isBack="true">
			<block slot="content">{{title}}</block>
		</Header>
		<view class="code-content">
			<view class="list-cell b-b getcode">
				<text class="cell-tit">当前绑定手机号码是：{{fmobile}}</text>
				<text class="cell-more" @tap="getCode" style="color:#f3431a">{{codeTip}}</text>
			</view>
			<view class="list-cell b-b code">
				<image src="/static/images/duanxin.png" style="width:31rpx;height:25rpx;"></image>
				<input type="number" class="password2-item" v-model="code" placeholder="请输入短信验证码" />
			</view>
			<view class="next">
				<view class="next-tip" @tap="tijiao" :style="{backgroundColor:backgroundColor}">
					下一步
				</view>
			</view>

			<!-- <navigator url="" style="margin-top: 10rpx;">去更换手机</navigator> -->
		</view>

	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				title: '短信验证码校验',
				cate: 1,
				noClick: true,

				mobile: '',
				fmobile: '',
				code: '',
				codeTip: '获取验证码',
				numShow: false,
				second: 60,

				field: '',
				keyword: '',
				backgroundColor: '#f99984'
			};
		},
		onLoad(option) {
			let result = this.$api.isLogin();
			if (result === false) {
				return false;
			}

			this.field = option.field;

			if (option.title) {
				this.title = option.title;
			}
			if (option.keyword != '') {
				this.keyword = option.keyword;
			}

			this.loadData();
		},

		watch: {
			code() {
				if (this.code.length == 4) {
					this.backgroundColor = '#f3431a';
				} else {
					this.backgroundColor = '#f99984';
				}
			}
		},
		methods: {
			...mapMutations(['logout']),

			async loadData() {
				let token = uni.getStorageSync('token');
				let cate = uni.getStorageSync('cate');
				this.cate = cate;

				if (!token) {
					this.$api.msg('token缺失！');
				}
				let url = '/getUserInfo';
				if (cate == 2) {
					url = '/getComInfo';
				}
				let res = await this.$myRequest({
					url: url,
					data: {
						cate: cate,
						token: token
					},
					methods: 'post'
				})

				let info = res.data.data;

				this.mobile = info.mobile;
				this.fmobile = info.mobile.substring(0, 3) + 'xxxx' + info.mobile.substring(7);

				this.password2 = info.password2;
			},

			async getCode() {
				//防止连续点击
				let that = this;
				if (that.noClick) {
					that.noClick = false;
					setTimeout(function() {
						that.noClick = true;
					}, 2000)
				} else {
					return false;
				}
				if (this.numShow == true) {
					this.$api.msg(this.second + 's之内不可再次发送');
					return false;
				}

				if (!this.mobile) {
					this.$api.msg('手机号码缺失');
					return false;
				}

				let res = await this.$myRequest({
					url: '/getCode/' + this.mobile
				})

				this.$api.msg(res.data.msg, 'success')
				this.codeTip = '60s'
				this.numShow = true
				var interval = setInterval(() => {
					--this.second;
					this.codeTip = this.second + 's'
					if (this.second <= 0) {
						clearInterval(interval);
						this.codeTip = '获取验证码';
						this.numShow = false;
						this.second = 60
					}
				}, 1000)
			},

			async tijiao() {
				if (!this.code) {
					this.$api.msg('请输入短信验证码');
					return false;
				}

				if (this.code.length != 4) {
					this.$api.msg('短信验证码输入错误');
					return false;
				}

				let res = await this.$myRequest({
					url: '/checkCode',
					data: {
						mobile: this.mobile,
						code: this.code
					},
					methods: 'POST'
				})

				if (res.data.status == 1) {
					this.$api.msg(res.data.msg)
					let url = '';
					switch (this.field) {
						case 'password1':
							url = '/pages/new-password1/new-password1?code=' + this.code;
							break;
						case 'password2':
							url = '/pages/new-password2/new-password2?code=' + this.code;
							break;
					}

					if (url != '') {
						setTimeout(() => {
							uni.redirectTo({
								url: url
							})
						}, 1500)
					}
				}
			}
		}
	}
</script>
<style>
	page {
		background-color: #f7f7f7;
		font-size: $font-base;
	}
</style>
<style lang='scss'>
	.container {
		// #ifdef APP-PLUS
		padding-top: 160rpx;
		// #endif

		// #ifdef H5
		padding-top: 108rpx;
		// #endif
		
		// #ifdef MP-WEIXIN
		padding-top: 160rpx;
		// #endif
	}

	.code-content {
		padding: 0 42rpx;
		font-size: $font-base;

		.getcode {
			padding: 62rpx 0;
			display: flex;
			justify-content: space-between;
		}

		.code {
			height: 80rpx;
			line-height: 80rpx;
			background-color: #fff;
			padding-left: 32rpx;
			display: flex;
			align-items: center;

			.password2-item {
				margin-left: 17rpx;
				font-size: $font-base;
			}


		}

		.next {
			padding-top: 40rpx;

			.next-tip {
				height: 80rpx;
				line-height: 80rpx;
				width: 100%;
				color: #fff;
				/* background-color: #f99984; */
				border-radius: 10rpx;
				display: flex;
				justify-content: center;
			}
		}
	}
</style>
